<template>
  <footer class="bg-gray-800 text-white mt-20">
    <div class="w-full py-12">
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- 品牌信息 -->
        <div class="col-span-1 md:col-span-2">
          <div class="flex items-center space-x-3 mb-4">
            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
              <i class="fas fa-tools text-white text-lg"></i>
            </div>
            <span class="text-xl font-bold">Markdown 工具箱</span>
          </div>
          <p class="text-gray-300 mb-4 max-w-md">
            专业的 Markdown 转换工具平台，提供思维导图、流程图、PPT、HTML 等多种格式转换服务。让文档创作更简单高效。
          </p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fab fa-github text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fab fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fab fa-weibo text-xl"></i>
            </a>
          </div>
        </div>

        <!-- 工具导航 -->
        <div>
          <h4 class="text-lg font-semibold mb-4">转换工具</h4>
          <ul class="space-y-2">
            <li><router-link to="/tools/mindmap" class="text-gray-300 hover:text-white transition-colors">思维导图</router-link></li>
            <li><router-link to="/tools/flowchart" class="text-gray-300 hover:text-white transition-colors">Mermaid 流程图</router-link></li>
            <li><router-link to="/tools/presentation" class="text-gray-300 hover:text-white transition-colors">PPT 演示文稿</router-link></li>
            <li><router-link to="/tools/html" class="text-gray-300 hover:text-white transition-colors">HTML 网页</router-link></li>
            <li><router-link to="/tools/diagram" class="text-gray-300 hover:text-white transition-colors">实例图表</router-link></li>
            <li><router-link to="/tools/pdf" class="text-gray-300 hover:text-white transition-colors">PDF 文档</router-link></li>
          </ul>
        </div>

        <!-- 帮助链接 -->
        <div>
          <h4 class="text-lg font-semibold mb-4">帮助与支持</h4>
          <ul class="space-y-2">
            <li><router-link to="/help" class="text-gray-300 hover:text-white transition-colors">使用帮助</router-link></li>
            <li><router-link to="/about" class="text-gray-300 hover:text-white transition-colors">关于我们</router-link></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">意见反馈</a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">服务条款</a></li>
          </ul>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-400 text-sm">
          © {{ currentYear }} Markdown 工具箱. 保留所有权利.
        </p>
        <div class="flex items-center space-x-4 mt-4 md:mt-0">
          <span class="text-gray-400 text-sm">Made with</span>
          <i class="fas fa-heart text-red-500"></i>
          <span class="text-gray-400 text-sm">by developers</span>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
// 获取当前年份
const currentYear = new Date().getFullYear()
</script> 